<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <!-- 格式化的css -->
    <link rel="stylesheet" href="./css/style.css">
    <!-- 本页的css -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部导航 -->
    <div class="xm_nav">
        <div class="continer">
            <ul>
                <li>小米官网</li>
                <li>小米商城</li>
                <li>MIUL</li>
                <li>LOT</li>
                <li>云服务</li>
                <li>天星数科</li>
                <li>有品</li>
                <li>小米开放平台</li>
                <li>企业团购</li>
                <li>资质证照</li>
                <li>协议规则</li>
                <li>下载app</li>
                <li>Select Location</li>
            </ul>
            <ul>
                <li>登录</li>
                <li>注册</li>
                <li>消息通知</li>
                <li class="shopping"><span class="iconfont">&#xe614;</span>购物车 (<span>0</span>)</li>
            </ul>
        </div>
    </div>
    <!-- 头部导航end -->
    <!-- 搜索区域 -->
    <div class="sc">
        <div class="search continer cl">
            <img src="./images/logo-mi2.png" alt="">
            <ul>
                <li>
                    <a href="">Xiaomi手机</a>
                    <div class="scmin2">
                        <ul class="continer">
                            <li>
                                <a href="">
                                    <img src="./images/4f9fe76880a5be3450d103bc23d6bf7e.png" alt="">
                                    <p>Xiaomi 13 Ultra</p>
                                    <span>6499元</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./images/4f9fe76880a5be3450d103bc23d6bf7e.png" alt="">
                                    <p>Xiaomi 13 Ultra</p>
                                    <span>6499元</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./images/4f9fe76880a5be3450d103bc23d6bf7e.png" alt="">
                                    <p>Xiaomi 13 Ultra</p>
                                    <span>6499元</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./images/4f9fe76880a5be3450d103bc23d6bf7e.png" alt="">
                                    <p>Xiaomi 13 Ultra</p>
                                    <span>6499元</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./images/4f9fe76880a5be3450d103bc23d6bf7e.png" alt="">
                                    <p>Xiaomi 13 Ultra</p>
                                    <span>6499元</span>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <img src="./images/4f9fe76880a5be3450d103bc23d6bf7e.png" alt="">
                                    <p>Xiaomi 13 Ultra</p>
                                    <span>6499元</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="">Redmi手机</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">平板</a></li>
                <li><a href="">家电</a></li>
                <li><a href="">路由器</a></li>
                <li><a href="">服务中心</a></li>
                <li><a href="">社区</a></li>
            </ul>
            <form action="">
                <input type="text" placeholder="Redmi K60 PRO">
                <a href="" class="iconfont">&#xe651;</a>
            </form>
        </div>
    </div>
    <!-- 搜索区域end -->
    <!-- 主导航 -->
    <div class="continer mnav">
        <ul>
            <li>
                <a href="">手机</a><span class="iconfont">&#xe62d;
                </span>
                <ul>
                    <li>
                        <a href="">
                            <img src="./images/5c6e60e48edf17219724faad95963b93.jpg" alt=""><span>手机壳</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./images/5c6e60e48edf17219724faad95963b93.jpg" alt=""><span>手机壳</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./images/5c6e60e48edf17219724faad95963b93.jpg" alt=""><span>手机壳</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./images/5c6e60e48edf17219724faad95963b93.jpg" alt=""><span>手机壳</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./images/5c6e60e48edf17219724faad95963b93.jpg" alt=""><span>手机壳</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./images/5c6e60e48edf17219724faad95963b93.jpg" alt=""><span>手机壳</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="./images/5c6e60e48edf17219724faad95963b93.jpg" alt=""><span>手机壳</span>
                        </a>
                    </li>

                    <li>
                        <a href="">
                            <img src="./images/5c6e60e48edf17219724faad95963b93.jpg" alt=""><span>手机壳</span>
                        </a>
                    </li>




                </ul>
            </li>
            <li>
                <a href="">电视</a><span class="iconfont">&#xe62d;
                </span>
            </li>
            <li>
                <a href="">家电</a><span class="iconfont">&#xe62d;
                </span>
            </li>
            <li>
                <a href="">笔记本 平板</a><span class="iconfont">&#xe62d;
                </span>
            </li>
            <li>
                <a href="">出行 穿戴</a><span class="iconfont">&#xe62d;
                </span>
            </li>
            <li>
                <a href="">耳机 音箱</a><span class="iconfont">&#xe62d;
                </span>
            </li>
            <li>
                <a href="">健康 儿童</a><span class="iconfont">&#xe62d;
                </span>
            </li>
            <li>
                <a href="">生活 箱包</a><span class="iconfont">&#xe62d;
                </span>
            </li>
            <li>
                <a href="">智能 路由器</a><span class="iconfont">&#xe62d;
                </span>
            </li>
            <li>
                <a href="">电源 配件</a><span class="iconfont">&#xe62d;
                </span>
            </li>
        </ul>
        <div>
            <img src="./images/f9b7e85d4159deccc3f00c3aa96cc5f3.jpg" alt="">
        </div>
    </div>
    <!-- 主导航end -->
    <!-- 保障服务 -->
    <div class="continer server cl">
        <ul class="u1 cl">
            <li>
                <a href="">
                    <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                    <p>保障服务</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                    <p>保障服务</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                    <p>保障服务</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                    <p>保障服务</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                    <p>保障服务</p>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                    <p>保障服务</p>
                </a>
            </li>
        </ul>
        <ul class="u2 cl">
            <li>
                <a href="">
                    <img src="./images/d7d4be1a9e701e16de498f89b1865867.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/d7d4be1a9e701e16de498f89b1865867.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/d7d4be1a9e701e16de498f89b1865867.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
    <!-- 保障服务end -->
    <!-- 大背景 -->
    <div class="bg">
        <!-- xiaomi13 -->
        <div class="xbner continer">
            <img src="./images/864aa0927000c3d717eca08955589d62.jpg" alt="">
        </div>
        <!-- 手机 -->
        <div class="tel continer cl">
            <p>手机</p>
            <a href="javscript:;">查看更多
                <span>&gt;</span>
            </a>
        </div>
        <!-- phones -->
        <div class="phones continer cl">
            <div class="left">
                <img src="./images/a5d3a59f7b53c23feab77434aa1f383b.jpg" alt="">
            </div>
            <ul class="cl">
                <li>
                    <a href="">
                        <img src="./images/202304171459_dd35f1e6215da63c356e352d4d398ce6.png" alt="">
                        <h4> Xiaomi 13 Ultra</h4>
                        <p>徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式</p>
                        <span>5999元起</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/202304171459_dd35f1e6215da63c356e352d4d398ce6.png" alt="">
                        <h4> Xiaomi 13 Ultra</h4>
                        <p>徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式</p>
                        <span>5999元起</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/202304171459_dd35f1e6215da63c356e352d4d398ce6.png" alt="">
                        <h4> Xiaomi 13 Ultra</h4>
                        <p>徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式</p>
                        <span>5999元起</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/202304171459_dd35f1e6215da63c356e352d4d398ce6.png" alt="">
                        <h4> Xiaomi 13 Ultra</h4>
                        <p>徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式</p>
                        <span>5999元起</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/202304171459_dd35f1e6215da63c356e352d4d398ce6.png" alt="">
                        <h4> Xiaomi 13 Ultra</h4>
                        <p>徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式</p>
                        <span>5999元起</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/202304171459_dd35f1e6215da63c356e352d4d398ce6.png" alt="">
                        <h4> Xiaomi 13 Ultra</h4>
                        <p>徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式</p>
                        <span>5999元起</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/202304171459_dd35f1e6215da63c356e352d4d398ce6.png" alt="">
                        <h4> Xiaomi 13 Ultra</h4>
                        <p>徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式</p>
                        <span>5999元起</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./images/202304171459_dd35f1e6215da63c356e352d4d398ce6.png" alt="">
                        <h4> Xiaomi 13 Ultra</h4>
                        <p>徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式</p>
                        <span>5999元起</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>